<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的文字样式</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}

        .box{
            width: 300px;
            height: 300px;
            background: aqua;
            margin: 20px;
            border: 2px black solid;

            /* 字体倾斜 */
            /* 
                italic 倾斜
                normal 不倾斜
            */
            font-style: italic;
            /* 字体加粗 */
            /* 
                值有两种设置方式
                font-weight
                100 - 900 的整百数，500以上加粗，400以下细体
                关键词
                1.normal 默认不加粗
                2.bold 加粗
                3.lighter 细体
            */

            /* 首行缩进 */
            /* 对每一个标签进行缩进 */
            text-indent: 2em;

            /* 字体间距 */
            letter-spacing: 5px;

            /* 词间距 */
            /* 每个单词和数字之间的间距 */
            word-spacing: 5px;

            /* 长单词换行 文本换行方式 */
            /* 允许单词内换行 */
            word-break: break-all;
        }

        span{
            /* 文字大小 */
            font-size: 14px;
            /* 字体颜色 */
            color: black;
            /* 字体样式 */
            /* 
                字体格式：
                1.serif 有衬线
                2.sans-serif 无衬线
            */
            font-family: '花体',serif;
        }
        p{
            font-size: 12px;
            font-family: '海韵',serif;
            text-align: center;
        }
        /* 字体对齐方式 */
        /* 
            text-align
            设置文本在标签内容区域里面的对齐方式
            left 左对齐
            right 右对齐
            center 居中对齐
            justify 两端对齐
        */

        @font-face {
            font-family: "花体";
            src: url('../../front/逐浪花体.otf');
        }
        @font-face {
            font-family: '海韵';
            src: url('../../front/迷你简海韵.ttf');
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是span标签</span>
        <p>这是p标签</p>
    </div>
</body>
</html>